<template>
  <div class="container">
    <top-nav :toLastPath="true">简历信息填写</top-nav>
    <ul>
      <li>
        <span class="picker" @click="showHide('showArea')">
            姓名
        </span>         
        <input type="text" name="name" placeholder="请输入真实姓名" v-model="name1">
      </li>
      <li>
          <span>性别</span>
          <input @click="showPicker(sex,'sexInput')" type="text" name="name" placeholder="选择性别" v-model="sexInput" readonly>
          <span @click="showPicker(sex,'sexInput')" >></span>
          <popup-picker :col="col" :models="models" ref="minePopup" @getSelectValue="getSelectValue"></popup-picker>
        
      </li>
      <li>
        <span>年龄</span>
        <input type="tel" name="name" placeholder="请填写年龄" v-model="age">
      </li>
      <li>

          <span>最高学历</span>
          <input @click="showPicker(education,'educationInput')" type="text" name="name" placeholder="选择学历" v-model="educationInput" readonly>
          <span @click="showPicker(education,'educationInput')">></span>
          <popup-picker :col="col" ref="minePopup" :models="models" @getSelectValue="getSelectValue"></popup-picker>
      </li>
      <li>
        <span>我的技能</span>
        <input type="text" name="name" placeholder="请填写技能 " v-model="skill">
      </li>
      <li>
        <span>手机号码</span>
        <input type="text" name="name" placeholder="请填写联系方式" v-model="tel">
      </li>
      <li style="margin-top:10px;height:40px">
        <span>个人头像</span>
        <!-- <img :src="logoImg.src" class="addImg" @click="upLoadImg"/> -->
        <van-uploader :after-read="onRead">
          <img :src="logoImg.src" class="addImg" />
        </van-uploader>
      </li>
      <li style="margin-top:20px">
          <div class="picker">
            <span>期望岗位</span>
            <input @click="showClassifyList" type="text" name="name" placeholder="选择期望行业/岗位" v-model="industryInput" readonly>
            <span @click="showClassifyList">></span>
          </div>
          <popup-picker ref="classify" :col="classifyData" columns_type='mulColumns' @getSelectValue="getSelectValue1"></popup-picker>
        
      </li>
      <li>
        <span>薪资类型</span>
        <input  @click="showPicker(moneyType,'moneyTypeInput')" type="text" name="name" placeholder="选择薪资类型" v-model="moneyTypeInput" readonly>
        <span @click="showPicker(moneyType,'moneyTypeInput')">></span>
        <popup-picker :col="col"  ref="minePopup" @getSelectValue="getSelectValue" :models="models"></popup-picker>
      </li>
      <li>
        <span>薪资金额</span>
        <input type="tel" name="name" placeholder="请填写薪资金额" v-model="money" >元
      </li>
      <li>   
          <span>工作地区</span>
          <input @click="showpopupArea" type="text" name="name" placeholder="选择公司地址" v-model="workAddressInput" readonly>
          <span @click="showpopupArea">></span>
          <popup-picker ref="area" :col="areaList" columns_type='area' @getSelectValue="getAreaValue"></popup-picker>
      </li> 
      <div class="commit" @click="commit">
        <div>保存</div>
      </div>
    </ul>
  </div>
</template>

<script>
import areaList from '@/assets/area'
import popupPicker from '@/components/popupPicker';
import topNav from '@/components/topNav';
import { Toast } from 'vant';
// import {mixin1} from '../../../utils/index.js'
export default {
  // mixins:[mixin1],
  data () {
    return { 
      classifyData:{},
      classifyDataId:{},
      areaList:areaList,
      models:[],
      col:[],
      showArea:true,
      showClassify:false,
      showMoney:false,
      showMore:false,   
      sex:['保密','男','女'],  //性别
      education:['小学','初中','高中','本科','研究生','硕士','博士'],  //学历
      skill:'',  //技能
      sexInput:"",//性别
      educationInput:"",  //学历
      name1:"",  //姓名
      age:"",   //年龄
      tel:"",   //联系电话
      workRegion: ['广东省', '广州市', '海珠区'],   //工作地址选项
      classifyTwoData:[['杭州', '宁波', '温州', '嘉兴', '湖州'],['福州', '厦门', '莆田', '三明', '泉州'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']],
      classifyTwoArr:[],
      classifyTwoId:"",
      classifyIndex: [0, 0],
      classifyOneData:[['广州', '厦门','深圳']],
      classifyOneArr:[],
      classifyOneId:"",
      moneyType:['日薪','计件','月薪','年薪'],   //薪资类型
      workAddressInput:"",   //工作地址详情显示
      industryInput:"",//期望行业显示
      moneyTypeInput:"",//薪资类型显示
      money:"",     //薪资数量
      logoImg:{src:'http://file.rzkeji.com/web/recruit/icon/addImg.png',id:""},//公司logo
      isUpload:true,  

    }
  },
  components:{
    popupPicker,
    topNav
  },
  methods: {

    // workAddress(e){   //获取选择工作的地址
    //   this.workRegion=e.target.value
    //   this.workAddressInput=this.workRegion[0]+this.workRegion[1]+this.workRegion[2]
    // },
    // moneySelect(e){ //获取薪资类型
    //   this.moneyTypeInput=this.moneyType[e.target.value]
    // },
    // sexSelect(e){
    //   this.sexInput=this.sex[e.target.value]
    // },
    // educationSelect(e){
    //   this.educationInput=this.education[e.target.value]
    // },
    // classifySelect(e){  //获取期待的行业/岗位
    //   this.classifyOneId=this.classifyOneArr[this.classifyIndex[0]]
    //   this.classifyTwoId=this.classifyTwoArr[this.classifyIndex[0]][this.classifyIndex[1]]
    //   this.industryInput=this.classifyTwoData[this.classifyIndex[0]][this.classifyIndex[1]]
    //   if(e.target.column==0)  //当第一列数据改变时才实现更新第二列数据
    //   {
    //     this.$set(this.classifyOneData,1,this.classifyTwoData[e.target.value]) //实现第一列和第二列数据的联动
    //     this.$set(this.classifyIndex,0,e.target.value)  //改变选择器第一列选择的内容
    //     this.$set(this.classifyIndex,1,0)  //当改变第一列的时候，第二列的内容初始化为第一个被选中
    //     this.classifyOneId=this.classifyOneArr[this.classifyIndex[0]]
    //     this.classifyTwoId=this.classifyTwoArr[this.classifyIndex[0]][0]
    //   } 
    //   else if(e.target.column==1){//改变选择器第二列选择的内容
    //     this.$set(this.classifyIndex,1,e.target.value)  
    //     this.classifyTwoId=this.classifyTwoArr[this.classifyIndex[0]][this.classifyIndex[1]]
    //   }
    // },
    async getInformation(){  //获取个人简历信息
      var userToken=window.localStorage.getItem('userToken')
      let res=await this.$axios('/ucenter/getResume',{params:{user_token:userToken}})
      
      let data=res.data.data;
      if(res.data.level=='success'){
        let sexTag="";
        if(data.user_info.sex=="1"){sexTag='男'}else if(data.user_info.sex=='2'){sexTag="女"}else{sexTag='保密'}
        this.name1=data.user_info.realname
        this.sexInput=sexTag
        this.age=data.age
        this.tel=data.phone
        this.logoImg.id=data.user_info.photo_id
        this.logoImg.src=data.user_info.photo_url
        this.skill=data.user_info.skill
        this.educationInput=data.education
        this.workRegion[0]=data.province
        this.workRegion[1]=data.city
        this.workRegion[2]=data.area
        this.workAddressInput=data.province+""+data.city+""+data.area
        this.moneyTypeInput=data.expected_salary_type   
        this.money=data.expected_salary 
        this.industryInput=data.job_name
      }
    },
    async commit(){  //提交简历信息  
      if(this.name1==''){
        Toast('姓名不能为空');
        return
      }else if(this.sexTag==''){
        Toast('性别不能为空');
        return
      }else if(this.age==''){
        Toast('年龄不能为空');
        return
      }else if(this.educationInput==''){
        Toast('学历不能为空');
        return
      }else if(this.tel==''){
        Toast('电话号码不能为空');
        return
      }else if(this.industryInput==''){
        Toast('期待岗位不能为空')
        return
      }else if(this.moneyTypeInput==''){
        Toast('薪资类型不能为空')
        return
      }else if(this.money==''){
        Toast('薪资金额不能为空')
        return
      }else if(this.workAddressInput==''){
        Toast('工作地区不能为空')
        return
      }
      
      var userToken=window.localStorage.getItem('userToken')
      let sexTag=this.$currency.sexTag(this.sexInput);
      let res=await this.$axios.post('/ucenter/setResume',{user_token:userToken,realname:this.name1,sex:sexTag,age:this.age,phone:this.tel,photo_id:this.logoImg.id,education:this.educationInput,skill:this.skill,province:this.workRegion[0],city:this.workRegion[1],area:this.workRegion[2],job_type_id:this.classifyTwoId,expected_salary_type:this.moneyTypeInput,expected_salary:this.money})
      if(res.data.level=='success'){
        this.$currency.showToast('修改成功');
        setTimeout(()=>{
          this.$router.push({path:'/me'})
        },3000)
      }
    },
    async onRead(file) {
      let f=file.content;
      this.logoImg.src='http://file.rzkeji.com/web/recruit/icon/loading.svg';
      this.$axios.post(
        '/file/UploadBase64',
        {base_code:f}
        
      ).then((res)=>{
        this.logoImg.src=res.data.data.img_url
        this.logoImg.id=res.data.data.id
        })
    },
    // async getClassifyData(){
    //   this.classifyOneData[0]=[]
    //   this.classifyOneArr=[]
    //   this.classifyTwoData=[]
    //   this.classifyTwoArr=[]
    //   let res=await this.$axios('/position/getIndustryList',"")
    //   console.log(res)
    //   for(let [index,value] of res.data.data.entries()){
    //     this.classifyOneData[0].push(value.name)
    //     this.classifyOneArr.push(value.id)
    //     this.classifyTwoData[index]=[]
    //     this.classifyTwoArr[index]=[]
    //     for(let [index1,value1] of value.job.entries()){
    //       this.classifyTwoData[index].push(value1.name)
    //       this.classifyTwoArr[index].push(value1.id)
    //     }
    //   }
    //   this.classifyOneData.push(this.classifyTwoData[0]);  //初始化选择器的数据
    //   console.log(this.classifyOneData)
    // },
    async getClassifyData(){//获取期待岗位
       let res=await this.$axios('/position/getIndustryList',"");
       let obj={},obj2={};
      let data=res.data.data;
      for(let p in data){
        let name=data[p].name
        let jobArr=[],jobArr2=[]
        data[p].job.forEach((value)=>{
          let obj2={[value.name]:value.id};
          jobArr.push(value.name)
          jobArr2.push(obj2)
        })
        obj[name]=jobArr //用于传进picker的对象数据
        obj2[name]=jobArr2 //用于选中相应的picker时，匹配相应的id
      }
      this.classifyData=obj;
      this.classifyDataId=obj2;
    },
    showPicker(col,mod){
      this.$refs.minePopup.$data.showArea=true;
      this.col=col;
      this.models=mod
    },
    getSelectValue(val,model){
      this[model]=val
      console.log(1111)
    },
    showClassifyList(){
      this.$refs.classify.$data.showArea=true;
    },
    getJob(val){
      this.industryInput=val;
      this.$refs.treeSelect.$data.showArea=false;
    },
    showpopupArea(){
      this.$refs.area.$data.showArea=true;
    },
    getArea(val){
      this.workAddressInput=val;
    },
    getSelectValue1(e){//返回该职业的id值
      for(let p in this.classifyDataId){
        if(p==e[0]){
          let jobArr=this.classifyDataId[p]
          for(let k in jobArr){
            if(Object.keys(jobArr[k])[0]==e[1]){
              // console.log(Object.values(jobArr[k])[0])
              this.classifyTwoId= Object.values(jobArr[k])[0] 
              this.industryInput=e[1]
            }
          }
        }
      }
    },
    getAreaValue(e){
      // this.workAddressInput
      this.workRegion[0]=e[0].name
        this.workRegion[1]=e[1].name
        this.workRegion[2]=e[2].name
        this.workAddressInput=this.workRegion[0]+this.workRegion[1]+this.workRegion[2]
      
    }

  },
  mounted(){
    this.getClassifyData();  //初始化选择器的数据
    // this.getAddress()
  },
  activated(){
    if(this.isUpload){
      this.getInformation()
    }
  },
}
</script>

<style scoped>
.title{width: 100%;height: 51px;line-height: 51px;text-align: center;font-size: 22px;color: #000000;background-color: #fff;margin-bottom: 5px;}
.container{padding-bottom:89px;background-color: #F8F8FB}
.container ul{width: 100%;margin-top:45px;}
.container ul li{width: 100%;height: 20px;display: flex;justify-content: row;padding: 20px 0px;background-color: #fff;margin-bottom: 2px;}
.container ul li span:nth-of-type(1){width: 100px;font-size: 17px;color: #000000;padding-left: 25px;}
.container ul li input{width: 223px;border: 0px;font-size: 15px;color: #B2B2B9;}
.container ul li span:nth-of-type(2){margin-right: 10px;font-size: 20px;color:#B2B2B9;}
.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;z-index: 99}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);border-radius: 8px;margin: 12.5px auto;color: #FFFFFF;}
picker,.picker{width: 100%;height: 100%;display: flex;justify-content: row;}
.addImg{width: 51px;height: 51px;}
</style>
